import { TabBar } from 'antd-mobile'
import { AppOutline, TruckOutline, UnorderedListOutline, UserOutline } from 'antd-mobile-icons'
import style from './index.module.scss'
import { useLocation, useNavigate } from 'react-router-dom'
import { useSelector } from 'react-redux'

const Bottom = () => {
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location

  const num = useSelector((state: {cartNum: {value: number}}) => state.cartNum.value)
  const token = useSelector((state: {token: {value: string}}) => state.token.value)

  const tabs = [
    { key: '/home', title: '首页', icon: <AppOutline />},
    { key: '/category', title: '分类', icon: <UnorderedListOutline /> },
    { key: '/shopcart', title: '购物车', icon:  <TruckOutline />, badge: token === undefined ? '' : (num === 0) ? '' : num},
    { key: '/mine', title: '我的', icon: <UserOutline />}
  ]
    
  return (
    <>
     <TabBar activeKey={pathname} className={style.bottom} onChange={value => navigate(`${value}`)}>
       {tabs.map(item => (
        <TabBar.Item key={item.key} icon={item.icon} title={item.title} badge={item.badge}/>
       ))}
     </TabBar>
    </>
  )
}

export default Bottom